.app.index{
  &.app-host-container{
    @media (min-width: 901px){
      margin-top: 20px;
      .cell{
        overflow: hidden;
        $icon_with : 100px;
        margin-bottom: 20px;
        position: relative;
        &:hover{
          transform:translate(0,-2px);
          -webkit-transform:translate(0,-2px);
          -moz-transform:translate(0,-2px);
          -o-transform:translate(0,-2px);
          -ms-transform:translate(0,-2px);
          transition: transform .2s ease-in-out;
          .cell-container{
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
            transition: box-shadow 0.2s ease-in-out;  
          }
        }
        &.new{
          .cell-container{
            border: solid 1px #337ab7;
          }
        }
        &.archived{
          .cell-container{
            border: solid 1px #D0D0D0;
            color: #666;
          }
        }
        .actions{
          position: relative;
          top: -32px;
          right: 12px;
        }
        .divider{
          display: none;
        }
        .cell-container{
          overflow: hidden;
          height: 460px;
          border: none;
          box-sizing: border-box;
          background-color: #fff;
          padding: 20px 32px;
          .icon{
            width: $icon_with;
            height: $icon_with;
            border-radius: 17.544%;
            overflow: hidden;
            margin: 12px 0;
            img{
              width: 100%;
            }
            .text-icon{
              width: 100%;
              height: 100%;
              background-color: #03A3FC;
              span{
                display: block;
                width: 100%;
                text-align: center;
                line-height: $icon_with;
                font-size: 40px;
                color: #fff;
              }
            }
          }
          .detail{
            display: block;
 /*           width:-moz-calc(100% - 48px); 
            width:-webkit-calc(100% - 48px); 
            width: calc(100% - 48px);*/
            .title{
              display: block;
              width: 100%;
              font-size: 16px;
            }
            .date-label{
              float: right;
              font-size: 13px;
              color: #999;
            }
            .sub-title{
              display: block;
              color: #777;
              font-size: 13px;
              line-height: 24px;
              /*span{
                color: #666;
              }*/
            }
            .halving-line{
              color: #999;
            }
          }
        }
      }
    }
    @media (max-width: 900px){
      padding-left: 0px;
      padding-right: 0px;
      &>.row{
        margin-left: 0px;
        margin-right: 0px; 
      }
      .cell{
        overflow: hidden;
        $icon_with : 48px;
        $padding_size : 15px;
        padding-left: 0px;
        padding-right: 0px;
        .divider{
          display: block;
          width: 100%;
          height: 1px;
          background-color: #E0E0E0;
          margin-left: $padding_size;
        }
        .cell-container{
          overflow: hidden;
          box-sizing: border-box;
          padding-left: $padding_size;
          .icon{
            width: $icon_with;
            height: $icon_with;
            border-radius: 8px;
            overflow: hidden;
            float: left;
            margin: 12px 0;
            img{
              width: 100%;
            }
            .text-icon{
              width: 100%;
              height: 100%;
              background-color: #03A3FC;
              span{
                display: block;
                width: 100%;
                text-align: center;
                line-height: $icon_with;
                font-size: 28px;
                color: #fff;
                font-weight: lighter;
              }
            }
          }
          .detail{
            display: block;
            float: left;
            padding: $padding_size - 2px 0;
            width:-moz-calc(100% - 48px); 
            width:-webkit-calc(100% - 48px); 
            width: calc(100% - 48px);
            padding-left: 12px;
            .title{
              display: block;
              width: 100%;
              font-size: 16px;
            }
            .date-label{
              float: right;
              margin-right: $padding_size;
              font-size: 13px;
              color: #999999;
            }
            .sub-title{
              color: #9b9b9b;
              font-size: 13px;
            }
            .halving-line{
              display: none;
            }
          }
        }
      }
    }
  }
}